<template>
  <!-- 企业介绍 -->
  <div>
    <div class="box">
      <div
        style="
          display: flex;
          justify-content: space-around;
          width: 100%;
          margin-top: 60px;
        "
      >
        <div class="minbox">
          <div class="blockNum">
            <img :src="imgList.scr" alt="" v-animate="'queue-bottom'" />
          </div>
          <div class="text">
            &nbsp;
            <div class="textTitle" v-animate="'queue-bottom'">速&nbsp;裁通</div>
            <div class="content" v-animate="'queue-bottom'">
              河北速裁通网络科技有限公司是国内领先的区块链线上司法服务平台，作为以区块链技术为基础的线上综合司法服务平台，
              速裁通联合CA认证机构、司法鉴定中心、
              公证处、仲裁委等机构，通过系统底层技术互联，实现线上身份认证、电子合同签署，在线公证存证、一键网络仲裁等功能。
              速裁通系统全程记录业务系统数据信息流，通过区块链技术在线公证存证，充分保障证据原貌，实现电子数据的“证据化”，并实现线上司法服务的批量化，
              智能化，快速出具裁决书，高效解决经济纠纷
            </div>
          </div>
        </div>
        <div class="minboxTwo">
          <div class="textTitle" v-animate="'queue-bottom'">我们的愿景</div>
          <div class="blockNum">
            <img :src="imgList.scr1" alt="" v-animate="'queue-bottom'" />
          </div>
          <div style="text-align: left" v-animate="'queue-bottom'">
            <div style="margin-bottom: 0.1rem">让经济纠纷一键解决</div>
            <div>
              技术赋能法律服务成为更高效、更专业、更高品牌知名度、更高市场信任度的线上司法平台；
            </div>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-around;
          width: 100%;
          margin-top: 150px;
          margin-bottom: 80px;
        "
      >
        <div class="minboxThree" v-animate="'queue-bottom'">
          <div class="textTitle">速裁通的地址</div>
          <div>免费服务热线：400-0311-272</div>
          <div>石家庄市新华区泰华街366号林荫大院底商三层</div>
          <div class="blockNum" style="text-align: right; margin-top: 0.2rem">
            <img :src="imgList.scr2" alt="" v-animate="'queue-bottom'" />
          </div>
        </div>
        <div class="minboxFour" v-animate="'queue-bottom'">
          <div class="textTitle">我们的文化</div>
          <div class="blockNum">
            <img :src="imgList.scr3" alt="" v-animate="'queue-bottom'" />
          </div>
          <div style="text-align: left">
            <div>创新 <span>成长</span> <span>卓越</span></div>
            <div>诚信 <span>共赢</span> <span>包容</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
     <div class="swiper" style="text-align: center">
       <LunBo :LunboImg="lunboImg"></LunBo>
    </div>

    <div class="cooperate">
      <h1>合作伙伴</h1>
      <div class="spanLine"></div>
      <div>您的信任是我们永恒的追求</div>
      <div class="cooImg">
        <div v-for="(item, index) in cooImgList" :key="index" class="cooImage">
          <div  v-animate="'queue-bottom'">
            <img :src="item.src" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LunBo from "./LunBo.vue";
export default {
  name: "about1",
  components: {
    LunBo,
    // Swiper,
    // SwiperSlide,
  },
  data() {
    return {
      imgList: {
        scr: require("@/assets/images/aboutOne/01.png"),
        scr1: require("@/assets/images/aboutOne/02.png"),
        scr2: require("@/assets/images/aboutOne/04.png"),
        scr3: require("@/assets/images/aboutOne/03.png"),
      },
      lunboImg: [
        {
          img: require("@/assets/images/aboutOne/pic01.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic02.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic03.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic04.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic05.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic01.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic02.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic03.png"),
        },
        {
          img: require("@/assets/images/aboutOne/pic04.png"),
        },


      ],
      cooImgList: [
        {
          src: require("@/assets/images/aboutOne/h1.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h2.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h3.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h4.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h5.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h6.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h7.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h8.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h9.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h10.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h11.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h12.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h13.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h14.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h15.png"),
          href: "",
        },
        {
          src: require("@/assets/images/aboutOne/h16.png"),
          href: "",
        },
      ],
    };
  },
  mounted() {
    // this.onSwiper()
  },
  methods: {},
};
</script>
<style lang="less" scoped>
// ---------------
.box {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

  .minbox {
    height: 310px;
    width: 400px;
    display: flex;
    margin-right: 180px;
    text-align: left;
  }

  .minboxTwo {
    width: 418px;
    text-align: right;
  }

  .content {
    width: 376px;
    text-indent: 2em;
  }

  .textTitle {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .minboxThree {
    text-align: left;
    width: 500px;
    margin-right: 40px;
  }

  .minboxFour {
    text-align: right;
    width: 350px;
  }
}

.blockNum {
  img {
    width: 248px;
    height: 129px;
  }
}

.swiper {
  width: 100%;
  height: 550px;
  background: url("../assets/images/aboutOne/pic2.png");
  margin-bottom: 80px;
  padding-top: 10px;
}

.cooperate {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  height: 100%;
  padding-bottom: 80px;
}

.cooImg {
  padding: 40px 40px 60px 40px;
  margin-top: 40px;
  background: #e6e6e6;
  border-radius: 10px;
  box-shadow: 0px 24px 32px 0px rgba(105, 105, 105, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid #1dd2af;
}

.cooImage {
  margin-top: 28px;
  margin-right: 32px;
  background: white;
  transition: all 0.7s;
  border-radius: 15px;

  img {
    width: 284px;
    height: 100px;

  }
}

.cooImage:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 20px 0px rgba(6, 0, 1, 0.2);

  img {
    filter: none;
  }
}



</style>
